<template>
  <common-edit-dialog
    :title="title"
    :visible.sync="open"
    @cancel="cancel"
    @submit="submitForm"
    :buttonLoading="buttonLoading"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="75px"
      @submit.native.prevent
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="IP地址" prop="ipAddress">
            <common-input
              v-model="form.ipAddress"
              :maxlength="128"
              :verify="false"
              placeholder="支持IPV4/IPV6格式"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="所属城市" prop="cityName">
            <el-cascader
              style="width: 100%"
              v-model="form.cityName"
              :options="allCityList"
              @change="handleChange"
              :props="{
                value: 'name',
                label: 'name',
                emitPath: false,
              }"
              :show-all-levels="false"
            >
              <template slot-scope="{ node, data }">
                <common-carousel-text
                  :content="data.name"
                ></common-carousel-text>
              </template>
            </el-cascader>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="经度" prop="cityLongitude">
            <common-input v-model="form.cityLongitude" disabled />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="纬度" prop="cityLatitude">
            <common-input v-model="form.cityLatitude" disabled />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </common-edit-dialog>
</template>

<script>
import { ipLibAdd, ipLibEdit } from "@/api/analysisCenter/ipAddr";
import { validateIP } from "@/utils/formValidates";
import ALLCITY from "@/utils/city";
import { getSingleArray } from "@/utils/util";

export default {
  components: {},
  data() {
    return {
      buttonLoading: false,
      title: "",
      open: false,
      rules: {
        ipAddress: [
          { required: true, message: "请输入IP地址", trigger: "blur" },
          {
            required: true,
            validator: validateIP,
            trigger: "blur",
            message: "IP地址错误，支持IPV4/IPV6格式",
          },
        ],
        cityName: [
          { required: true, message: "请选择所属城市", trigger: "change" },
        ],
      },
      form: {
        ipAddress: "",
        cityName: "",
        cityLongitude: "",
        cityLatitude: "",
        cityCode: "",
      },
      allCityList: ALLCITY,
      singleCityArray: [],
    };
  },
  methods: {
    show(data) {
      this.open = true;
      this.singleCityArray = getSingleArray(this.allCityList);

      this.form = data.id ? data : this.$options.data().form;
      this.title = data.id ? "编辑IP地址库" : "新增IP地址库";
    },

    handleChange(data) {
      let currentCity = this.singleCityArray.find((item) => {
        return item.name === data;
      });
      if (currentCity) {
        this.form.cityCode = currentCity.adcode;
        this.form.cityLongitude = currentCity.center[0];
        this.form.cityLatitude = currentCity.center[1];
      }
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.id) {
            ipLibEdit({
              id: this.form.id,
              ipAddress: this.form.ipAddress.trim(),
              cityName: this.form.cityName,
              cityLongitude: this.form.cityLongitude,
              cityLatitude: this.form.cityLatitude,
              cityCode: this.form.cityCode,
            })
              .then((res) => {
                if (res && res.code === 200) {
                  this.$emit("submitForm");
                  this.$GlobalSuccessMessage("编辑成功");
                  this.open = false;
                } else {
                  this.$GlobalErrorConfirm("编辑失败", res.msg);
                }
              })
              .catch(() => {})
              .finally(() => {
                this.buttonLoading = false;
              });
          } else {
            this.form.ipAddress = this.form.ipAddress.trim();
            ipLibAdd(this.form)
              .then((res) => {
                if (res && res.code === 200) {
                  this.$emit("submitForm");
                  this.$GlobalSuccessMessage("保存成功");
                  this.open = false;
                } else {
                  this.$GlobalErrorConfirm("保存失败", res.msg);
                }
              })
              .catch((res) => {
                this.$GlobalErrorConfirm("保存失败", res.msg);
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          }
        }
      });
    },
    cancel() {
      this.open = false;
    },
  },
};
</script>

<style lang="scss" scoped></style>
